/*
 * @Description: 映射关系导航栏
 * @Author: Zzt
 * @Date: 2022-11-03 10:23:24
 * @LastEditTime: 2022-12-30 11:08:13
 */

import { useEffect, useState } from 'react';
import { Menu, Typography } from 'antd';
import classNames from 'classnames/bind';
import { useMappingRelationContext } from '../contexts/MappingRelationContext';
import styles from '../styles/sidebar.module.scss';

const cx = classNames.bind(styles);

const items = [
  { label: '散文件与档案类型 - 映射', key: 7 },
  { label: '档案类型与散文件 - 映射', key: 8 },
  { label: '档案类型与档案类型', key: 9 }
];

const NavSidebar = () => {
  const { getCurrent, setSelectKey } = useMappingRelationContext();

  const [current, setCurrent] = useState(0);

  useEffect(() => {
    setCurrent(items[0].key);
  }, []);

  useEffect(() => {
    setSelectKey([]);
    getCurrent(current);
  }, [current]);

  const onSelect = ({ key }: any) => {
    setCurrent(parseInt(key, 10));
  };

  return (
    <div className={cx('container')}>
      <Typography.Title level={5} className={cx('at-header')}>
        映射关系类型
      </Typography.Title>
      <div className={cx('at-list-wrap')}>
        <Menu
          items={items}
          selectedKeys={[`${current}`]}
          onSelect={onSelect}
          style={{ width: 200 }}
        />
      </div>
    </div>
  );
};
export default NavSidebar;
